<template>
	<div class="user" id="user">
		<!--
	    	作者：846966684@qq.com
	    	时间：2017-02-21
	    	描述：通用头部
	    	通过参数，可以控制不同的状态
	    -->
		<ion-header>
		</ion-header>
		<!--
	    	作者：846966684@qq.com
	    	时间：2017-02-21
	    	描述：通用全局容器--全屏容器
	    -->
		<ion-content class="content">
			<ion-content12>
				<div class="trading_title">
					<div class="container">
						<a href="/" class="hone">首页&gt;</a>
						<a href="#/trading/btc/trade" class="deal">安全中心&gt;</a>
						<a class="active" href="#/trading/btc/trade">安全设置</a>
					</div>
				</div>
				<div class="content_left">

					<div class="main">
						<div class="ul_content">
							<ul>
								<li class="ul_title">资产管理</li>
								<li>
									<a :class="{ 'active': isPath == '/money/overview' }" href="#/money/overview">资产总览</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/money/visualization' }" href="#/money/visualization">资产可视化分析</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/money/bbao' }" href="#/money/bbao">币宝理财</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/money/recharge' }" href="#/money/recharge">充值冲币</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/money/cashIn' }" href="#/money/cashIn">提现提币</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/money/securitylog' }" href="#/money/securitylog">资金账户管理</a>
								</li>
								<li>
									<a :class="{ 'active': isPath == '/money/partner' }" href="#/money/partner">合伙人计划</a>
								</li>
							</ul>
						</div>

						<div class="ul_content" style="margin-top: 20px;">
							<ul>
								<li class="ul_title">客服支持</li>
								<li>在线客服</li>
								<li>QQ交流群</li>
							</ul>
						</div>

					</div>

				</div>

				<div class="content_right">
					<user-title></user-title>
					<router-view></router-view>
				</div>
			</ion-content12>
		</ion-content>
		<!--
    	作者：846966684@qq.com
    	时间：2017-02-21
    	描述：通用footer
    -->
		<ion-footer>
		</ion-footer>

	</div>
</template>

<script>
	import userTitle from './pannel/user_title';
	export default {
		name: 'user',
		computed: {
			isPath() {
				return this.$route.path;
			},
		},
		data() {
			return {
				title: '',
			}
		}, //定义变量
		components: {
			userTitle,
		}, //注册组件
		methods: { //方法都在这里
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.user {
		.content {
			margin-bottom: 80px;
		}
		.content_left {
			float: left;
			.main {
				/*border: 2px solid #ededed;*/
				float: left;
				text-align: center;
				width: 200px;
		    height: 885px;
				.ul_content {
					border: 2px solid #ededed;
					ul {
						padding: 20px 20px;
						.ul_title {
							font-size: 18px;
							font-weight: 700;
							height: 50px;
							line-height: 50px;
							border-bottom: 1px solid #283138;
							color: #383a3f;
							margin-bottom: 15px;
						}
						li {
							height: 54px;
							line-height: 54px;
							font-size: 14px;
							a {
								color: #727272;
							}
							.active {
								color: #0093f1;
							}
						}
					}
				}
			}
		}
		.content_right {
			margin-left: 240px;
		}
		.trading_title {
			text-align: left;
			font-size: 14px;
			padding: 30px 0px;
			a {
				color: #9b9b9b;
			}
			.active {
				color: #0093f1;
			}
		}
	}
</style>